<template>
  <div>
    <div class="timeline">
      <div class="entry" v-for="(item, index) in list" :key="index">
        <div class="d-flex">
          <div class="title">
            <h3>{{ item.date }}</h3>
          </div>
          <div class="body">
            <div class="d-flex content" @click="detail(index)" id="history-detail">
              <p>{{ item.title }}</p>
              <img :src="item.imgUrl" lazy-load="true" v-show="item.imgUrl">
            </div>
          </div>
        </div>
        <div style="padding: 0 10px" v-show="(index + 1) % 5 === 0">
          <ad unit-id="adunit-98d66e99291778e5" @error="adError"></ad>
        </div>
      </div>
    </div>
    <p class="noData" v-if="!noData">正在努力加载中</p>
    <p class="noData" v-else>没有更多了</p>  
  </div>
</template>
<script>
import mixin from '../mixins/mixin'

export default {
  mixins: [mixin],
  props: {
    tab: {
      type: Number,
      default: 0
    },
    date: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      list: [],
      page: 1,
      noData: false,
      totalPage: 5,
      showAd: true
    }
  },
  watch: {
    tab (val) {
      if (val === 0 && this.totalPage > this.page) {
        this.page++
        this.getHistoryToday()
      }
      if (val === 0) {
        this.resetSwiperHeight()
      }
    },
    date (val) {
      this.resetData()
    }
  },
  onLoad () {
    this.getHistoryToday()
  },
  onReachBottom () {
    if (this.tab === 0) {
      if (this.totalPage > this.page) {
        this.page++
        this.getHistoryToday()
      } else {
        this.noData = true
      }
    }
  },
  methods: {
    // 重置swiper高度
    resetSwiperHeight () {
      setTimeout(() => {
        const query = wx.createSelectorQuery() // 创建节点查询器 query
        query.select('.timeline').boundingClientRect() // 获取节点位置信息的查询请求
        query.exec(res => {
          this.$emit('changeHeight', res[0].height)
        })
      }, 500)
    },
    // 广告加载失败
    adError () {
      this.showAd = false
    },
    // 获取历史上的今天
    getHistoryToday () {
      this.$http.get({
        url: this.$services.GET_HISTORY_TODAY,
        data: {
          page: this.page,
          pageSize: 5,
          d: this.date
        }
      }).then(res => {
        if (res.code === 0) {
          this.totalPage = res.body.pageInfo.totalPage
          this.list = this.list.concat(res.body.data)
          for (const v of this.list) {
            v.date = v.date.slice(0, 4).replace('年', '')
            if (v.picUrl !== '') {
              v.imgUrl = JSON.parse(v.picUrl)[0].url
            } else {
              v.imgUrl = ''
            }
          }
          this.resetSwiperHeight()
          if (res.body.data.length === 0) {
            wx.reportAnalytics('no_content_in_history', {
            })
          }
        }
      })
    },
    // 跳转到详情页
    detail (index) {
      wx.setStorageSync('historyDetail', this.list[index])
      wx.navigateTo({
        url: '/pages/history_today/main'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../styles/_timeline.scss';
</style>

